<!-- 单柱状图 -->
<template>
  <div :style="{ width: width, height: height }">
    <div :id="id" :ref="id" :style="{ width: width, height: height }"></div>
  </div>
</template>

<script>
import echarts from "echarts";

export default {
  name: "SingleBar",
  props: {
    id: {
      required: true,
      type: String,
      default: "single-bar",
    },
    width: {
      type: String,
      default: "100%",
    },
    height: {
      type: String,
      default: "100%",
    },
    color: {
      type: String,
      default: "rgba(39, 129, 206, 1)",
    },
    colorList: {
      type: Array,
      default() {
        return [
          // {
          //   color1: "rgba(233, 243, 245, 1)",
          //   color2: "rgba(139, 153, 178, 0.4)",
          //   color3: "rgba(139, 153, 178, 1)",
          // },
          // {
          //   color1: "rgba(233, 243, 245, 1)",
          //   color2: "rgba(44, 227, 236, 0.4)",
          //   color3: "rgba(44, 227, 236, 1)",
          // },
          // {
          //   color1: "rgba(233, 243, 245, 1)",
          //   color2: "rgba(253, 180, 40, 0.4)",
          //   color3: "rgba(253, 180, 40, 1)",
          // },
          // {
          //   color1: "rgba(233, 243, 245, 1)",
          //   color2: "rgba(39, 129, 206, 0.4)",
          //   color3: "rgba(39, 129, 206, 1)",
          // },
          // {
          //   color1: "rgba(233, 243, 245, 1)",
          //   color2: "rgba(249, 114, 87, 0.4)",
          //   color3: "rgba(249, 114, 87, 1)",
          // },
          // {
          //   color1: "rgba(139, 153, 178, 1)",
          //   color2: "rgba(138, 215, 114, 0.4)",
          //   color3: "rgba(138, 215, 114, 1)",
          // },
        ];
      },
    },
    chartData: {
      type: Object,
      default() {
        return {
          xAxisData: [
            // "湖北银行", "广州银行", "苏州银行"
          ],
          data: [
            // {
            //   name: "名次上升",
            //   data: [5, 6, 7],
            // },
          ],
        };
      },
    },
  },

  data() {
    return {
      chart: null,
    };
  },
  mounted() {
    this.getChart();
    if (this.chart) {
      window.addEventListener("resize", this.chart.resize);
    }
  },
  beforeDestroy() {
    if (!this.chart) return;
    this.chart.dispose();
    this.chart = null;
  },
  created() {},
  methods: {
    getChart() {
      const legendData = [];
      const seriesData = [];
      const _this = this;
      this.chartData.data.forEach((element, index) => {
        legendData.push(element.name);
        seriesData.push({
          name: element.name,
          type: "bar",
          barMaxWidth: 20,
          showBackground: true,
          backgroundStyle: {
            color: "rgba(255,255,255,0.08)",
          },
          // tooltip: {
          //   valueFormatter: function(value) {
          //     return value + " ml";
          //   },
          // },
          itemStyle: {
            normal: {
              // color: {
              //   type: "linear",
              //   x: 0,
              //   y: 0,
              //   x2: 0,
              //   y2: 1,
              //   colorStops: [
              //     {
              //       offset: 0,
              //       color: _this.colorList[index].color1,
              //     },
              //     {
              //       offset: 0.04,
              //       color: _this.colorList[index].color3,
              //     },
              //     {
              //       offset: 1,
              //       color: _this.colorList[index].color3,
              //     },
              //   ],
              //   globalCoord: false,
              // },
              color: this.color || "rgba(39, 129, 206, 1)",
            },
          },
          data: element.data,
        });
      });
      // var chartDom = document.getElementById(this.id);
      this.chart = echarts.init(this.$refs[this.id]);
      var option = {
        tooltip: {
          show: true,
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
          textStyle: {
            fontSize: 10,
          },
          // position: ["15%", "30%"],
          extraCssText:
            "margin:4px 6px;background: rgba(18,56,107,0.45);border-radius: 2px;border: 1px solid #1B74B9;",
          formatter: function (params) {
            let str = "";
            str += `<div class="><div style="">${params[0].name}<div/>`;
            params.forEach((element, index) => {
              let color = "";
              if (element.color.colorStops) {
                color = element.color.colorStops[2].color;
              } else {
                color = element.color;
              }
              const marker = `<span style="display:inline-block;margin-right:5px;width:8px;height:8px;background:${color}"></span>`;
              str += `<div>`;
              str += `${marker}
              <span style="display:inline-block;margin-right:5px;min-width:80px;color:#E3F1FD;font-size:12px;">${element.seriesName}</span>
              <span style="display:inline-block;margin-right:5px;min-width:20px;color:#E3F1FD;">${element.value}</span>`;
              str += "</div>";
            });
            str += "</div>";
            return str;
          },
        },
        backgroundColor: "rgb(255,255,255,0)",
        legend: {
          show: true,
          icon: "rect",
          itemWidth: 8,
          itemHeight: 8,
          textStyle: {
            fontSize: 10,
            color: "#E3F1FD",
          },
          data: legendData,
          right: "8%",
          top: 6,
        },
        grid: [
          {
            left: "5%",
            right: "10%",
            top: "20%",
            bottom: "10%",
            containLabel: true,
          },
        ],
        xAxis: [
          {
            type: "category",
            data: this.chartData.xAxisData,
            axisPointer: {
              type: "shadow",
            },
            axisLabel: {
              align: "left",
              fontSize: 12,
              fontWeight: 400,
              color: "#E3F1FD",
            },
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              show: false,
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "(名)",
            // nameLocation: "middle",
            nameTextStyle: {
              color: "#9BAEC3",
              fontSize: 12,
              padding: 0,
            },
            // min: 0,
            // max: 250,
            // interval: 50,
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              color: "#9BAEC3",
              margin: 0,
            },
            splitLine: {
              lineStyle: {
                color: "#60686F",
                type: "dashed",
              },
            },
          },
        ],
        series: seriesData,
      };
      option && this.chart.setOption(option, true);
    },
  },
};
</script>

<style lang="scss" scoped></style>
